<template>
  <div>
    <ul class="bottom">
      <li v-if="isOld"><p>{{goods.vipPrice}}</p>支付金额</li>
      <li v-else><p>{{goods.goodsPrice}}</p>支付金额</li>
      <li>
        <wv-button type="default" :plain="true" @click="addCart()">加入购物车</wv-button>
        <wv-button type="default" :plain="true" @click="goSubOrder()">{{cartParams.desc}}</wv-button>
      </li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
  import {addToShoppingcart} from '../../../test/unit/http'
  import {Toast} from 'we-vue'
  export default {
    name: '',
    props: {
      cartParams: {},
      goods: {},
      isOld: {type: Boolean}
    },
    data() {
      return {};
    },
    methods: {
      addCart(){
        let categoryCode = this.cartParams.categoryCode;
        if (categoryCode == 'viproom' || categoryCode == 'viponly') {
          if (this.goods.isAppoint == 2) {
            Toast.text('该商品需要预约');
            return;
          }
        }
        let goodsPrice = this.goods.goodsPrice;
        if (this.isOld) {
          goodsPrice = this.goods.vipPrice;
        }
        let params = {goodsId: this.goods.goodsId, unitPrice: goodsPrice};
        addToShoppingcart(params).then(res => {
          console.log(res);
          Toast.success(res.info);
        })
      },
      goSubOrder(){
        let cartParams = this.cartParams;
        let goods = this.goods;
        let goodsId = goods.goodsId;
        console.log(cartParams.categoryCode);
        if (cartParams.categoryCode == 'viproom' || cartParams.categoryCode == 'viponly') {
          if (cartParams.isAppoint == 2) {
            this.$router.push({path: 'xuyuyue', query: {goodsId: goodsId, appointType: cartParams.appointType,maxTime:goods.maxTime,airportName:goods.airportName}});
            return;
          }
        }
        this.$router.push({path: 'submitorder', query: {goodsId: goodsId}})
      }
    },
    updated(){

    },
    created() {
    },
    components: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .bottom {
    background-color: #eee;
    display: flex;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
    li:first-child {
      font-size: 12px;
      color: #999;
      flex: 0 100px;
      text-align: left;
      p {
        color: #fc8d4e;
        font-size: 18px;
      }
    }
    :last-child {
      display: flex;
      width: calc(100% - 120px);
      font-size: 0;
      button {
        font-size: 18px;
        color: #fff;
        height: 40px;
        line-height: 40px;
        border: none;
        margin-top: 0;
        /*width: 136px;*/
        flex: 1;
        text-align: center;
      }
      :first-child {
        background-image: linear-gradient(to left, #feb329, #fbd31c);
        border-radius: 0;
        border-top-left-radius: 25px;
        border-bottom-left-radius: 25px;
      }
      :last-child {
        background-image: linear-gradient(to left, #ff8551, #f9964e);
        border-radius: 0;
        border-top-right-radius: 25px;
        border-bottom-right-radius: 25px;
      }
    }
  }

  .weui-btn:after {
    border-radius: 0;
  }
</style>
